<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>edit_address</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
   

        .edit-address {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f6f6f6;
        }

        .edit-address-topform {
            padding: 0 15px;
            background-color: white;
        }

        .edit-address-topform-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 51px;
            border-top: 1px solid #f8f8f8;
        }

        .edit-address-topform-text {
            font-size: 16px;
            color: #333333;
        }

        .edit-address-topform-input {
            width: 210px;
            height: 30px;
            text-align: right;
            color: #333333;
            border: none;
        }

        .qu_box {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a_picker {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }

        .a_gor {
            width: 10px;
            height: 10px;
            margin-left: 8px;
        }

        /* 备注 */
        .edit-address-back {
            font-size: 14px;
            margin: 15px 15px 4px;
            color: #6c7279;
        }

        .edit-address-back-box {
            height: 122px;
            box-sizing: border-box;
            padding: 15px;
            background-color: white;
        }

        .edit-address-back-textarea {
            width: 100%;
            height: 100%;
            border: none;
        }

 

        /* btn */
        .edit-address-footer {
            display: flex;
            flex-direction: row;
            padding: 15px;
        }

        .edit-address-btn {
            flex: 1;
            height: 45px;
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            line-height: 45px;
            font-size: 16px;
            color: white;
        }

        .edit-address-btn:active {
            opacity: 0.7;
        }

        .btn_orange {
            background-color: #339dff;
            margin-right: 15px;
        }

        .btn_red {
            background-color: #ff6600;
        }

        .avm-switch:checked::before {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .avm-switch:checked::after {
            -webkit-transform: translateX(20px);
            transform: translateX(22px);
        }

        .avm-switch {
            width: 52px;
            height: 32px;
            display: inline-block;
            border: 1px solid #DFDFDF;
            outline: none;
            border-radius: 16px;
            box-sizing: border-box;
            background-color: #DFDFDF;
            transition: background-color 0.1s, border 0.1s;
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            vertical-align: middle;
            background-color: rgb(4, 190, 2);
        }

        .avm-switch::before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            background-color: #f6f6f6;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }

        .avm-switch::after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: #FFFFFF;
            box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }
    </style>
</head>

<body>
    <div class="page"  @vue:mounted="mounted">
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">新增收货地址</span>
        </div>
        <div class="edit-address">
            <div class="edit-address-topform">
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">收货人</span>
                    <input class="edit-address-topform-input form-name" placeholder="请填写收货人"
                        maxlength="20" v-model="data.dt.name" />
                </div>
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">联系方式</span>
                    <input class="edit-address-topform-input form-phone" placeholder="请填写联系方式"
                        keyboard-type="number" maxlength="11"  v-model="data.dt.phone" />
                </div>
            
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">设为默认地址</span>
                    <input type="checkbox" color="#7FA000"  class="avm-switch" onchange="" />
                </div>
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">收货地址</span>
                    <div class="qu_box">
                        <input class="edit-address-topform-input form-qustr"  v-model="data.dt.qustr" placeholder="请填写收货地址"  />
                    </div>
                </div>
            </div>
            <!-- 备注 -->
            <span class="edit-address-back">详细地址</span>
            <div class="edit-address-back-box">
                <textarea class="edit-address-back-textarea form-address "   v-model="data.dt.address"   data-id="address"
                 placeholder="街道、门牌号等"   ></textarea>
            </div>

            <!-- btn -->
            <div class="flex1"></div>
            <div class="edit-address-footer">
                <span class="edit-address-btn btn_orange  " @click="fnSubmit( )">保存</span>
        <!--         <span class="edit-address-btn btn_red  " onclick="fnDelete(this)">删除</span>-->
                <span class="edit-address-btn btn_red" @click="fnDelete( )">删除</span>
            </div>
        </div>
    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
 
<script  type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js'
    const APP = ()=>{
        createApp({
        data:  { 
            id:0,
            address:"",
            dt :{ id :0 ,name:"", phone:"", qustr:"" , address:""}
        },
        async fnSubmit() {
        const name= this.data.dt.name ;
        const phone=this.data.dt.phone ;
        const qustr= this.data.dt.qustr ;
        const address= this.data.dt.address ;
        if (!name) {
            api.toast({msg: '请输入姓名~'});
            return;
        }
        if (name.length > 14) {
            api.toast({msg: '收货人姓名不得超过14个字符~'});
            return;
        }
        if (name.length < 2) {
            api.toast({msg: '收货人姓名不得少于2个字符~'});
            return;
        }
        if (!phone) {
            api.toast({msg: '请输入联系方式~'});
            return;
        }
        if (isMobile(phone)) {
            api.toast({msg: '请输入正确的手机号~'});
            return;
        }
        if (!qustr) {
            api.toast({msg: '请填写收货地址~'});
            return;
        }
        if (!address) {
            api.toast({msg: '请输入详细地址~'});
            return;
        }
        if (address.length > 50) {
            api.toast({msg: '详细地址不得超过50个字符~'});
            return;
        }
        var id = this.data.dt.id;
        var dt = {
            id, name,phone , qustr,address
        };
      
        let   rt  =  await   core.post("api/tuser/userdataadd",dt ,{} );  
        core.log(rt );
        api.toast({
            msg:'保存成功',
            location: 'middle'
        })
        api.execScript({
                    name: 'address',
                    script: 'window.getData();'
                });
        api.closeWin();
    }
,
   async     fnDelete(obj){
 
      
        var dt = {id : this.data.dt.id  };
      
        let res = await    core.post("api/tuser/userDataDelete",dt );
        core.log(res);
         api.toast({   msg: '删除成功.'});
         api.execScript({
            name: 'address',
            script: 'window.getData();'
        });
         api.closeWin();
    },
        mounted() {
            this.data.dt =   api.pageParam ; 
            if(!this.data.dt.name )this.data.dt.name = "";
            if(!this.data.dt.phone )this.data.dt.phone = "";
            if(!this.data.dt.qustr )this.data.dt.qustr = "";
            if(!this.data.dt.address )this.data.dt.address = "";
            if( this.data.dt.id>0){
                this.data.id =  this.data.dt.id;
                this.data.address = this.data.dt.address;
          
            }
        }
      }).mount( )
    }

    window.apiready = ()=> {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>


<script>
 
 
 

    function isMobile(str) {
        var mobileReg = /^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{9}$/;
        return mobileReg.test(str);
    }


</script>

</html>